<template>
    <div class="middle-panel_wrap">
        <div class="stats-box">
            <div class="stats-item">
                <div class="stats-item-num">{{ statsData[0].value }}</div>
                <div class="stats-item-label">累计制氢量(吨)</div>
            </div>
            <div class="stats-item">
                <div class="stats-item-num">{{ statsData[1].value }}</div>
                <div class="stats-item-label">累计售氢量(吨)</div>
            </div>
            <div class="stats-item">
                <div class="stats-item-num">{{ statsData[2].value }}</div>
                <div class="stats-item-label">累计制氧量(吨)</div>
            </div>
            <div class="stats-item">
                <div class="stats-item-num">{{ statsData[3].value }}</div>
                <div class="stats-item-label">累计碳减排量(吨)</div>
            </div>
            <div class="stats-item">
                <div class="stats-item-num">{{ statsData[4].value }}</div>
                <div class="stats-item-label">累计节省汽油量(吨)</div>
            </div>
            <div class="stats-item">
                <div class="stats-item-num">{{ statsData[5].value }}</div>
                <div class="stats-item-label">累计亚运用氢量(吨)</div>
            </div>
        </div>

        <div class="flow-chart-box">
            <div class="flow-item is_hover" @mouseenter="flowItemHover( 0 )" @mouseleave="flowItemOut( 0 )"></div>
            <div class="flow-item is_hover" @mouseenter="flowItemHover( 1 )" @mouseleave="flowItemOut( 1 )"></div>
            <div class="flow-item is_hover" @mouseenter="flowItemHover( 2 )" @mouseleave="flowItemOut( 2 )"></div>
            <div class="flow-item is_hover" @mouseenter="flowItemHover( 3 )" @mouseleave="flowItemOut( 3 )"></div>
            <div class="flow-item is_hover" @mouseenter="flowItemHover( 4 )" @mouseleave="flowItemOut( 4 )"></div>

            <div class="popover-box">
                <template v-for="(item,index) in popoverInfo">
                    <transition enter-active-class="animated flipInX" leave-active-class="animated flipOutX" >

                        <div class="popover-item"

                             v-show="flowItemVisible.indexOf( index ) !== -1"
                             @mouseenter="popoverItemHover()"
                             @mouseleave="popoverItemOut()"
                        >
                            <div class="popover-item-title">{{ item.title }}</div>
                            <div class="popover-item-text" v-for="val in item.values">{{ val }}</div>
                        </div>
                    </transition>
                </template>
            </div>
        </div>

        <div class="stat-chart-box">
            <div class="left-stat">
                <div class="stat-info">
                    <div>{{statsData[6].value}}%</div>
                    <div>综合能效</div>
                </div>
                <img class="stat-icon" src="../../assets/images/largeScreen/icon_synthesis.png" alt="">
            </div>
            <div class="right-stat">
                <img class="stat-icon" src="../../assets/images/largeScreen/icon_security.png" alt="">
                <div class="stat-info">
                    <div>{{statsData[7].value}}</div>
                    <div>安全评估</div>
                </div>
            </div>

            <div class="chart-item">
                <div class="chart-box" ref="gaugeChart1"></div>
                <div class="chart-info">
                    <div>{{ chartData[0].value.toFixed(0) }}</div>
                    <div>Pa</div>
                </div>
            </div>
            <div class="chart-item">
                <div class="chart-box" ref="gaugeChart2"></div>
                <div class="chart-info">
                    <div>{{ chartData[1].value.toFixed(0) }}</div>
                    <div>Pa</div>
                </div>
            </div>
            <div class="chart-item">
                <div class="chart-box" ref="gaugeChart3"></div>
                <div class="chart-info">
                    <div>{{ chartData[2].value.toFixed(0) }}</div>
                    <div>Pa</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {queryTempquery} from '@/axios/api';

    export default {
        data() {
            return {
                statsData: [{value: ''}, {value: ''}, {value: ''}, {value: ''}, {value: ''}, {value: ''}, {value: ''}, {value: ''}],

                chartData: [
                    {
                        id: 'gaugeChart1',
                        color: '#05FF7F',
                        title: '制氢压力',
                        value: 25,
                        percent: 25 / 35,
                    },
                    {
                        id: 'gaugeChart2',
                        color: '#22E4FF',
                        title: '输出压力',
                        value: 25,
                        percent: 25 / 35,
                    },
                    {
                        id: 'gaugeChart3',
                        color: '#D6BA27',
                        title: '电堆进气压力',
                        value: 25,
                        percent: 25 / 35,
                    },
                ],
                flowItemVisible: [],
                popoverInfo: [
                    {
                        title: '加压机',
                        values: ['入口压力：360 V', '排气压力：882 V'],
                    },
                    {
                        title: '电制氢',
                        values: ['电流密度：94A/m²', '氧中氢：5.23%', '氢中氧：2.78%'],
                    },
                    {
                        title: '储氢瓶组',
                        values: ['瓶组压力：360 MPa'],
                    },
                    {
                        title: '燃料电池',
                        values: ['输出电压：360 V', '输出电流：88 A', '输出功率：234 kW'],
                    },
                    {
                        title: '± 375V',
                        values: ['输出功率：360 kV', '电压：882 V', '电流：234 A'],
                    },
                ],
								timer:null,
            }
        },
        methods: {
            initMiddle() {
                let target = {
                    h_7: {
                        ch: 'virtual',
                        adr: 11167,
                        val: 0
                    },
                    h_8: {
                        ch: 'virtual',
                        adr: 11168,
                        val: 0
                    },
                    h_9: {
                        ch: 'virtual',
                        adr: 11169,
                        val: 0
                    },
                    h_10: {
                        ch: 'virtual',
                        adr: 11170,
                        val: 0
                    },
                    h_11: {
                        ch: 'virtual',
                        adr: 11171,
                        val: 0
                    },
                    h_12: {
                        ch: 'virtual',
                        adr: 11172,
                        val: 0
                    },
                    h_13: {
                        ch: 'virtual',
                        adr: 11173,
                        val: 0
                    },
                    h_14: {
                        ch: 'virtual',
                        adr: 11174,
                        val: 0
                    },
                    hs_25: {
                        ch: 'h2-01',
                        adr: 16409,
                        val: 0
                    },
                    hs_26: {
                        ch: 'h2-01',
                        adr: 16410,
                        val: 0
                    },
                    hs_27: {
                        ch: 'h2-01',
                        adr: 16411,
                        val: 0
                    }
                };
                let re_og = {};
                for (var key in target) {
                    if (!(re_og[target[key].ch] instanceof Array)) {
                        re_og[target[key].ch] = [];
                    }
                    re_og[target[key].ch].push(target[key].adr);
                }
                let payload = [];
                for (var key in re_og) {
                    let ele = {};
                    ele.target = key;
                    ele.address = re_og[key].sort((a, b) => {
                        return a - b;
                    });
                    payload.push(ele);
                }
                this.$api.queryTempquery(payload).then(res => {
                    this.statsData = res[0].result;
                    this.chartData = res[1].result;
                    this.chartData.map((item,index)=>{
                        item.id = 'gaugeChart' + (index+1),
                            item.percent = (item.value/35).toFixed(2);
                        if(index === 0){
                            item.color='#05FF7F';
                        }else if(index === 1){
                            item.color='#22E4FF';
                        }else if(index === 2){
                            item.color='#D6BA27';
                        }
                    });
                });
            },
            initMiddle2() {
                let target = {
                    hs_13: {
                        ch: 'h2-01',
                        adr: 16397,
                        val: 0
                    },
                    hs_14: {
                        ch: 'h2-01',
                        adr: 16398,
                        val: 0
                    },
                    hs_15: {
                        ch: 'h2-01',
                        adr: 16399,
                        val: 0
                    },
                    hs_16: {
                        ch: 'h2-01',
                        adr: 16400,
                        val: 0
                    },
                    hs_17: {
                        ch: 'h2-01',
                        adr: 16401,
                        val: 0
                    },
                    hs_18: {
                        ch: 'h2-01',
                        adr: 16402,
                        val: 0
                    },
                    hs_19: {
                        ch: 'h2-01',
                        adr: 16403,
                        val: 0
                    },
                    hs_20: {
                        ch: 'h2-01',
                        adr: 16404,
                        val: 0
                    },
                    hs_21: {
                        ch: 'h2-01',
                        adr: 16405,
                        val: 0
                    },
                    hs_22: {
                        ch: 'h2-01',
                        adr: 16406,
                        val: 0
                    },
                    hs_23: {
                        ch: 'h2-01',
                        adr: 16407,
                        val: 0
                    },
                    hs_24: {
                        ch: 'h2-01',
                        adr: 16408,
                        val: 0
                    },
                };
                let re_og = {};
                for (var key in target) {
                    if (!(re_og[target[key].ch] instanceof Array)) {
                        re_og[target[key].ch] = [];
                    }
                    re_og[target[key].ch].push(target[key].adr);
                }
                let payload = [];
                for (var key in re_og) {
                    let ele = {};
                    ele.target = key;
                    ele.address = re_og[key].sort((a, b) => {
                        return a - b;
                    });
                    payload.push(ele);
                }
                this.$api.queryTempquery(payload).then(res => {
                    const data = res[0].result;
                    this.popoverInfo = [
                        {
                            title: '加压机',
                            values: ['入口压力：' + data[0].value.toFixed(2) + 'V', '排气压力：' + data[1].value.toFixed(2) + 'V'],
                        },
                        {
                            title: '电制氢',
                            values: ['电流密度：' + data[2].value.toFixed(2) + 'A/m²', '氧中氢：' + data[3].value.toFixed(2) + '%', '氢中氧：' + data[4].value.toFixed(2) + '%'],
                        },
                        {
                            title: '储氢瓶组',
                            values: ['瓶组压力：' + data[5].value.toFixed(2) + 'MPa'],
                        },
                        {
                            title: '燃料电池',
                            values: ['输出电压：' + data[6].value.toFixed(2) + 'V', '输出电流：' + data[7].value.toFixed(2) + 'A', '输出功率：' + data[8].value.toFixed(2) + 'kW'],
                        },
                        {
                            title: '± 375V',
                            values: ['输出功率：' + data[9].value.toFixed(2) + 'kV', '电压：' + data[10].value.toFixed(2) + 'V', '电流：' + data[11].value.toFixed(2) + 'A'],
                        }]

                });
            },
            gaugeChartLoad(obj) {
                var _this = this;
                var dom = this.$refs[obj.id];
                var chart = this.$echarts.init(dom);

                var dataArr = [
                    {
                        value: 10,
                        name: '噪音检测',
                    },
                ];
                var color = new _this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                        offset: 0,
                        color: '#5CF9FE', // 0% 处的颜色
                    },
                    {
                        offset: 0.17,
                        color: '#468EFD', // 100% 处的颜色
                    },
                    {
                        offset: 0.9,
                        color: '#468EFD', // 100% 处的颜色
                    },
                    {
                        offset: 1,
                        color: '#5CF9FE', // 100% 处的颜色
                    },
                ]);
                var colorSet = [
                    [1, color],
                    // [0.91, color],
                    // [1, '#FFF']
                ];
                var rich = {
                    white: {
                        fontSize: 50,
                        color: '#fff',
                        fontWeight: '500',
                        padding: [-150, 0, 0, 0],
                    },
                    bule: {
                        fontSize: 70,
                        fontFamily: 'DINBold',
                        color: '#fff',
                        fontWeight: '700',
                        padding: [-120, 0, 0, 0],
                    },
                    radius: {
                        width: 350,
                        height: 80,
                        // lineHeight:80,
                        borderWidth: 1,
                        borderColor: '#0092F2',
                        fontSize: 50,
                        color: '#fff',
                        backgroundColor: '#1B215B',
                        borderRadius: 20,
                        textAlign: 'center',
                    },
                    size: {
                        height: 400,
                        padding: [100, 0, 0, 0],
                    },
                };

                var option = {
                    title: {
                        text: obj.title,
                        textStyle: {
                            color: '#B7CDFF',
                            fontSize: 14,
                        },
                        x: 'center',
                        bottom: 20,
                        // padding: [0,0,0,5],
                    },
                    series: [{
                        type: 'gauge',
                        startAngle: 220,
                        endAngle: -40,
                        max: 35,
                        splitNumber: 5,
                        // splitNumber: '35',
                        radius: '90%',//仪表盘半径
                        pointer: {
                            show: true,
                            length: "90%",          // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
                            width: 5,
                        },
                        itemStyle: {            // 仪表盘指针样式。
                            color: "#22E4FF",
                            shadowBlur: 10,         // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                            shadowColor: "#22E4FF",    // 阴影颜色。支持的格式同color。
                        },
                        splitLine: {show: false},//是否显示分隔线
                        axisLine: {//仪表盘轴线
                            show: true,
                            lineStyle: {
                                width: 10,
                                color: [[0.1, obj.color], [obj.percent, obj.color], [1, '#2B4AAF']],
                            }
                        },
                        axisTick: {//刻度
                            distance: -15,
                            length: 15,
                            lineStyle: {
                                color: '#001C60',//
                                width: 1.5
                            }
                        },
                        axisLabel: {
                            distance: -13,            // 标签与刻度线的距离,默认 5。
                            color: "#7D94DE",          // 文字的颜色,默认 #fff。
                            fontSize: 12,
                        },//不显示刻度标签
                        detail: {
                            show: false,
                        },
                        data: [{
                            value: obj.value,
                            // name: '制氢压力',
                            title: {show: false},//不显示标题
                            detail: {show: false},//不显示详情
                        }]
                    }]
                };

                chart.setOption(option);
            },

            flowItemHover(index) {
                if (window.popoverOutTimer) {
                    clearTimeout(window.popoverOutTimer);
                }

                if (window.hoverTimer) {
                    clearTimeout(window.hoverTimer);
                }


                window.hoverTimer = setTimeout(() => {
                    this.flowItemVisible = [];
                    this.flowItemVisible.push(index);
                }, 300);

            },

            flowItemOut(index) {
                if (window.popoverOutTimer) {
                    clearTimeout(window.popoverOutTimer);
                }

                if (window.mouseOutTimer) {
                    clearTimeout(window.mouseOutTimer);
                }

                let num = this.flowItemVisible.indexOf(index);

                window.mouseOutTimer = setTimeout(()=> {
                    this.flowItemVisible.splice(num, 1);
                }, 300)
            },

            popoverItemHover() {
                if (window.mouseOutTimer) {
                    clearTimeout(window.mouseOutTimer);
                }
            },

            popoverItemOut() {
                if (window.popoverOutTimer) {
                    clearTimeout(window.popoverOutTimer);
                }

                window.popoverOutTimer = setTimeout(()=> {
                    this.flowItemVisible = [];
                }, 200)
            },
        },
        mounted() {
					clearInterval(this.timer);
					let that = this;
					this.initMiddle();
					this.initMiddle2();
            that.gaugeChartLoad(that.chartData[0]);
            that.gaugeChartLoad(that.chartData[1]);
            that.gaugeChartLoad(that.chartData[2]);
            that.timer = setInterval(function(){
                that.initMiddle();
                that.initMiddle2();
                that.gaugeChartLoad(that.chartData[0]);
                that.gaugeChartLoad(that.chartData[1]);
                that.gaugeChartLoad(that.chartData[2]);
            },1000*5)
        },
        destroyed() {
            if( this.timer ) {
                clearInterval(this.timer);
            }
        },
    }
</script>

<style lang="less" scoped>
    .middle-panel_wrap {
        width: 100%;
        height: 100%;
        overflow: hidden;

        > .stats-box {
            height: 119px;
            width: 100%;
            text-align: center;
            padding: 0 80px;
            box-sizing: border-box;

            > .stats-item {
                display: inline-block;
                vertical-align: top;
                width: calc(100% / 6);
                height: 100%;
                background-image: url("../../assets/images/largeScreen/bg_item_1.png");
                background-position: center center;
                background-repeat: no-repeat;

                .stats-item-num {
                    font-weight: bold;
                    color: #FFFFFF;
                    font-size: 24px;
                    line-height: 30px;
                    padding-top: 25px;
                    transform: scale(0.9, 1);
                }

                .stats-item-label {
                    font-size: 12px;
                    font-weight: 400;
                    color: #B7CDFF;
                    margin-top: 50px;
                }
            }
        }

        > .flow-chart-box {
            width: 100%;
            height: calc(100% - 119px);
            background-image: url("../../assets/images/largeScreen/img_flow_chart.png");
            background-repeat: no-repeat;
            background-position: center top;
            position: relative;
            top: 30px;

            > .flow-item {
                position: absolute;
                background-repeat: no-repeat;
                background-position: center center;
                transition: all 0.5s;

                &:hover {
                    transform: scale(1.03,1.03);
                }

                &:nth-of-type( 1 ) {
                    width: 101px;
                    height: 71px;
                    top: 75px;
                    left: 304px;
                    background-image: url("../../assets/images/largeScreen/img_item_1.png");
                }

                &:nth-of-type( 2 ) {
                    width: 203px;
                    height: 206px;
                    top: 148px;
                    left: 63px;
                    background-image: url("../../assets/images/largeScreen/img_item_2.png");
                }

                &:nth-of-type( 3 ) {
                    width: 151px;
                    height: 203px;
                    top: 172px;
                    left: 418px;
                    background-image: url("../../assets/images/largeScreen/img_item_3.png");
                }

                &:nth-of-type( 4 ) {
                    width: 262px;
                    height: 251px;
                    top: 314px;
                    left: 360px;
                    background-image: url("../../assets/images/largeScreen/img_item_4.png");
                }

                &:nth-of-type( 5 ) {
                    width: 189px;
                    height: 225px;
                    top: 276px;
                    left: 732px;
                    background-image: url("../../assets/images/largeScreen/img_item_5.png");
                }
            }

            > .popover-box {

                > .popover-item {
                    position: absolute;
                    width: 200px;
                    min-height: 100px;
                    background: rgba(4, 55, 178, 0.9);
                    border: 1px solid rgba(255, 255, 255, 0.2);
                    box-sizing: border-box;
                    border-radius: 9px;
                    padding: 10px 15px;
                    font-size: 16px;
                    color: rgba(255, 255, 255, 0.71);
                    line-height: 40px;
                    transition: opacity 0.3s;
                    z-index: 99;

                    .popover-item-title {
                        font-size: 18px;
                        color: #ffffff;
                        border-bottom: 1px solid rgba(255, 255, 255, 0.21);
                        box-sizing: border-box;
                    }

                    .popover-item-text {
                        line-height: 32px;
                    }

                    &:before {
                        content: ' ';
                        position: absolute;
                        left: -14px;
                        top: 34px;
                        width: 0;
                        height: 0;
                        border-top: 10px solid transparent;
                        border-bottom: 10px solid transparent;
                        border-right: 14px solid rgba(4, 55, 178, 0.9);
                    }

                    &:nth-of-type( 1 ) {
                        top: 75px;
                        left: 384px;
                    }

                    &:nth-of-type( 2 ) {
                        top: 218px;
                        left: 203px;
                    }

                    &:nth-of-type( 3 ) {
                        top: 232px;
                        left: 528px;
                    }

                    &:nth-of-type( 4 ) {
                        top: 424px;
                        left: 530px;
                    }

                    &:nth-of-type( 5 ) {
                        top: 386px;
                        left: 852px;
                    }
                }
            }
        }

        > .stat-chart-box {
            width: 100%;
            height: 160px;
            position: absolute;
            left: 0;
            bottom: 25px;
            text-align: center;

            > .chart-item {
                display: inline-block;
                vertical-align: top;
                width: 162px;
                height: 162px;
                margin-right: 80px;
                border-radius: 50%;
                box-shadow: 0 15px 30px rgba(0, 0, 0, 0.58);
                /*background: linear-gradient(180deg, #112F83 0%, #001C60 90%);*/
                position: relative;
                background-image: url("../../assets/images/largeScreen/bg_chart_2.png");
                background-repeat: no-repeat;
                background-position: -19px -8px;

                > .chart-box {
                    width: 100%;
                    height: 100%;
                }

                > .chart-info {
                    position: absolute;
                    width: 50px;
                    height: 50px;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                    border-radius: 50%;
                    background-image: url("../../assets/images/largeScreen/bg_chart_4.png");
                    background-position: -17px -7px;
                    font-size: 12px;
                    color: #7D94DE;

                    > div:first-child {
                        font-size: 24px;
                        color: #ffffff;
                        text-shadow: 0 0 5px #ffffff;
                        line-height: 26px;
                        margin: 7px 0 0px;
                    }
                }

                &:nth-of-type( 3 ) {
                    background-image: url("../../assets/images/largeScreen/bg_chart_1.png");
                }

                &:last-child {
                    margin-right: 0;
                    background-image: url("../../assets/images/largeScreen/bg_chart_3.png");
                }
            }

            .stat-info {
                display: inline-block;
                vertical-align: middle;
                width: 100px;
                text-align: right;
                color: #B7CDFF;
                font-size: 14px;
                padding-right: 16px;
                box-sizing: border-box;

                > div:first-child {
                    color: #29FF76;
                    font-size: 24px;
                    font-weight: 600;
                    line-height: 30px;
                }
            }

            .stat-icon {
                width: 60px;
                vertical-align: middle;
            }

            > .left-stat {
                height: 60px;
                width: 160px;
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                margin: auto;
            }

            > .right-stat {
                height: 60px;
                width: 160px;
                position: absolute;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;

                .stat-info {
                    text-align: left;
                    padding-left: 16px;
                }
            }
        }
    }
</style>
